{% extends "layouts/layout.html" %}
{% block title %}
Search Results
{% endblock %}
{% block content %}
<style>
#circular3dG{
position:relative;
width:60px;
height:60px;
}

.circular3dG{
position:absolute;
background-color:#850A85;
width:17px;
height:17px;
-moz-border-radius:18px;
-moz-animation-name:bounce_circular3dG;
-moz-animation-duration:0.64s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:18px;
-webkit-animation-name:bounce_circular3dG;
-webkit-animation-duration:0.64s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:18px;
-ms-animation-name:bounce_circular3dG;
-ms-animation-duration:0.64s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:18px;
-o-animation-name:bounce_circular3dG;
-o-animation-duration:0.64s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:18px;
animation-name:bounce_circular3dG;
animation-duration:0.64s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#circular3d_1G{
left:24px;
top:4px;
-moz-animation-delay:0.24000000000000005s;
-webkit-animation-delay:0.24000000000000005s;
-ms-animation-delay:0.24000000000000005s;
-o-animation-delay:0.24000000000000005s;
animation-delay:0.24000000000000005s;
}

#circular3d_2G{
left:37px;
top:14px;
-moz-animation-delay:0.32s;
-webkit-animation-delay:0.32s;
-ms-animation-delay:0.32s;
-o-animation-delay:0.32s;
animation-delay:0.32s;
}

#circular3d_3G{
left:44px;
top:27px;
-moz-animation-delay:0.4s;
-webkit-animation-delay:0.4s;
-ms-animation-delay:0.4s;
-o-animation-delay:0.4s;
animation-delay:0.4s;
}

#circular3d_4G{
left:41px;
top:40px;
-moz-animation-delay:0.4800000000000001s;
-webkit-animation-delay:0.4800000000000001s;
-ms-animation-delay:0.4800000000000001s;
-o-animation-delay:0.4800000000000001s;
animation-delay:0.4800000000000001s;
}

#circular3d_5G{
left:25px;
top:44px;
-moz-animation-delay:0.56s;
-webkit-animation-delay:0.56s;
-ms-animation-delay:0.56s;
-o-animation-delay:0.56s;
animation-delay:0.56s;
}

#circular3d_6G{
left:5px;
top:29px;
-moz-animation-delay:0.64s;
-webkit-animation-delay:0.64s;
-ms-animation-delay:0.64s;
-o-animation-delay:0.64s;
animation-delay:0.64s;
}

#circular3d_7G{
left:0px;
top:8px;
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-ms-animation-delay:0.72s;
-o-animation-delay:0.72s;
animation-delay:0.72s;
}

#circular3d_8G{
left:10px;
top:0px;
-moz-animation-delay:0.8s;
-webkit-animation-delay:0.8s;
-ms-animation-delay:0.8s;
-o-animation-delay:0.8s;
animation-delay:0.8s;
}

@-moz-keyframes bounce_circular3dG{
0%{
-moz-transform:scale(1)}

100%{
-moz-transform:scale(.3)}

}

@-webkit-keyframes bounce_circular3dG{
0%{
-webkit-transform:scale(1)}

100%{
-webkit-transform:scale(.3)}

}

@-ms-keyframes bounce_circular3dG{
0%{
-ms-transform:scale(1)}

100%{
-ms-transform:scale(.3)}

}

@-o-keyframes bounce_circular3dG{
0%{
-o-transform:scale(1)}

100%{
-o-transform:scale(.3)}

}

@keyframes bounce_circular3dG{
0%{
transform:scale(1)}

100%{
transform:scale(.3)}

}

</style>

<h3>You searched for: {{query}}</h3>

<script type="text/javascript">
  function load_item(item){
    var $parent = $(item).parent();
    console.log($(parent));
    var $is_local = $parent.attr("id") == "local_search_results"
    console.log(parent);
    var $limit = parseInt($("#query_limit").val());
    var $page = parseInt($parent.attr("data-page"));
    var $partner_id = $parent.attr("data-partner-id")
    var $offset = $page * $limit;
    var $query = $("#query_field").val();
    $(item).append("<h4>" + generate_spinner() + "</h4>");
    console.log($(item));
    $(item).find("tbody").html("");
    $parent.attr("data-loading", "loading");
    var $sort_order = JSON.stringify([
      {"type" : $("#query_sortA").val(), "ordering" : $("#query_orderA").val()},
      {"type" : $("#query_sortB").val(), "ordering" : $("#query_orderB").val()}      
    ]);
    console.log($sort_order);
    var url = $is_local ? "/webservices/local_search" : "/webservices/partner_search"
    $.get(url, { "limit" : $limit, "offset" : $offset, "query" : $query, "sort_options" : $sort_order, "partner_id" : $partner_id }, function(resp){
    	$(item).find("h4").remove();
      if (!$is_local) {
        console.log(url);
        console.log(resp);
      };
      $parent.attr("data-loading", "");
      resp = JSON.parse(resp);
      if (!resp.success) {
        console.log("Error: " + resp.message);
        return;
      };
      $tbody = $(item).find("tbody");
      for(var i = 0; i < resp.items.length; i++){
        var it = resp.items[i];
        if ($is_local) {
          //Ugh, this is pretty ugly... sorry!
          string = "<tr><td>" + it.created_at + "</td><td>" 
          + "<a href=\"/items/view_item?item_id=" + it.id + "\"><div>" + it.title + "</div></a></td><td>" 
          + it.description + "</td>"
          + "<td> $" + it.price + "</td>" + 
          {% if is_admin %} "<td><a href=\"/items/delete_item?item_id=" + it.id +  "&xsrf_token={{xsrf_token}}\"><button class=\"btn btn-primary\"  \value=\"Delete\">Delete Item</button></a></td>" + "<td>" + it.expiration_date + "</td>" +
          {% endif %} 
          {% if user %}
          "<td><a href=\"/threads/new_thread?about=" + it.id + "\"><button class=\"btn btn-primary\" value=\"Contact Seller\">Contact Seller</button></a></td>" +
          {% endif %}
          "</tr>"
          $tbody.append(string);  
        }else {
       		var string = "<tr><td><a href=\"/items/view_remote_item?item_id=" + it.id + "&partner_id=" + $partner_id + "\">" + it.title + "</a></td><td>" + it.description + "</td><td>" + it.price + "</td></tr>"
          $tbody.append(string);
        }
        
      }

      var start = $offset + 1;
      var end = $offset + resp.items.length;
      var showing_string = "Showing " + start + " - " + end + " out of " + resp.total;
      results_left = 0;
      if (resp.results_left) {
      	results_left = resp.results_left;
      }else {
      	results_left = resp.total - end;
      };
      $parent.attr('data-results-left', results_left);
      if (resp.items.length == 0) {showing_string = "Showing 0 of " + resp.total};
      $(item).parent().find("span.showing_indicator").html(showing_string);
    });
  }

  function generate_spinner()
  {
    return '<div id="circular3dG"><div id="circular3d_1G" class="circular3dG"></div><div id="circular3d_2G" class="circular3dG"></div><div id="circular3d_3G" class="circular3dG"></div><div id="circular3d_4G" class="circular3dG"></div><div id="circular3d_5G" class="circular3dG"></div><div id="circular3d_6G" class="circular3dG"></div><div id="circular3d_7G" class="circular3dG"></div><div id="circular3d_8G" class="circular3dG"></div></div>'
  }

  $(document).ready(function() {

    $(".search_prev").click(function(){
      var $parent = $(this).parent();
      var $page = parseInt($parent.attr("data-page"));
      if ($page > 0 && $parent.attr("data-loading").length == 0) {
        $page = $page - 1;
        $parent.attr("data-page", $page);
        load_item($parent.find(".remote_search_table"));
      };
    });

    $(".search_next").click(function(){
      var $parent = $(this).parent();
      var $page = parseInt($parent.attr("data-page"));
      if ($parent.attr("data-loading").length == 0 && parseInt($parent.attr("data-results-left")) > 0) {
        $page = $page + 1;
        $parent.attr("data-page", $page);
        load_item($parent.find(".remote_search_table"));
      };
    });

    $(".remote_search_table").each(function(index, item){
        $(item).parent().attr("data-page", 0);
        load_item(item);
      });
  });
</script>
<!-- Kill me now... This should go in a .css file but i'm lazy -->

<div id="hidden_fields">
	{{ sanitizeHTML('<input type="hidden" id="query_field" value="' + query + '" />
	<input type="hidden" id="query_limit" value="' +  limit + '" />
	<input type="hidden" id="query_search_by" value="' +  search_by + '" />
	<input type="hidden" id="query_sortA" value="' +  sort_by['a']['sort_field'] + '" />
	<input type="hidden" id="query_sortB" value="' +  sort_by['b']['sort_field'] + '" />	
	<input type="hidden" id="query_orderA" value="' +  sort_by['a']['order'] + '" />
	<input type="hidden" id="query_orderB" value="' +  sort_by['b']['order'] + '" />') }}
</div>

<form action="/items/search" method="get">
  <div class="well ui-widget">Advanced Search: 
    <input type="text" id="advanced_search" data-provide="typeahead" name="query" value="{{ query }}"/><br/>
    <ul id="search_results">
    </ul>
    <script>
    function suggestion_clicked(val){
      $("#advanced_search").val(val);
      $("#advanced_search").focus();
      $("#search_results").html("");
    }

    $('#advanced_search').typeahead({
        source: function (query, typeahead) {
          console.log(typeahead);
          console.log(query)
          $("#search_results").html("Loading...");
            $.get("/webservices/local_search_suggestions", { 'query' : query }, function(resp){
              console.log(resp);
              j = JSON.parse(resp);
              //for (object in j) {
              //  var name = j.name
             // }
             $("#search_results").html("");
              var ret = j["items"];
              $.each(ret, function(index, r){
                console.log(r);
                $("#search_results").append("<li><b>" + r.name + "</b></li>");
                for (var i = 0; i < r.items.length; i++) {
                  r_2 = r.items[i];
                  $("#search_results").append(("<li><a href=\"#\" onclick=\"suggestion_clicked('" + r_2["fullString"].replace(/[^a-zA-Z0-9 \$\%\-_\!\.&=/:\?]/g, '') + "')\">" + r_2["fullString"].replace(/[^a-zA-Z0-9 \$\%\-_\!\.&=/:\?]/g, '') + "</a></li>"));
                };
              });
            });
        },
        property: "item"
    });
    </script>
    <div id="search_forms">
      Limit: <select name="query_limit" value="{{ limit }}">
          <option {% if limit == '10' %} selected=selected {% endif %} value="10">10</option>
          <option {% if limit == '25' %} selected=selected {% endif %} value="25">25</option>
          <option {% if limit == '50' %} selected=selected {% endif %} value="50">50</option>
          <option {% if limit == '100' %} selected=selected {% endif %} value="100">100</option>                              
        </select>
      <br />
      Sort By: <select name="query_sortA">
          <option {% if sort_by['a']['sort_field'] == 'title' %} selected=selected {% endif %} value="title">Title</option>
          <option {% if sort_by['a']['sort_field'] == 'description' %} selected=selected {% endif %} value="description">Description</option>
          <option {% if sort_by['a']['sort_field'] == 'price' %} selected=selected {% endif %} value="price">Price</option>
          <option {% if sort_by['a']['sort_field'] == 'time_create' %} selected=selected {% endif %} value="time_create">Time Created</option>
          <option {% if sort_by['a']['sort_field'] == 'location' %} selected=selected {% endif %} value="location">Location</option>
      </select>
      <select name="query_orderA" value="desc">
        <option {% if sort_by['a']['order'] == 'desc' %} selected=selected {% endif %} value="desc">DESC</option>
        <option {% if sort_by['a']['order'] == 'asc' %} selected=selected {% endif %} value="asc">ASC</option>    
      </select>
      And: <select name="query_sortB" value="title">
          <option {% if sort_by['b']['sort_field'] == 'title' %} selected=selected {% endif %} value="title">Title</option>
          <option {% if sort_by['b']['sort_field'] == 'description' %} selected=selected {% endif %} value="description">Description</option>
          <option {% if sort_by['b']['sort_field'] == 'price' %} selected=selected {% endif %} value="price">Price</option>
          <option {% if sort_by['b']['sort_field'] == 'time_create' %} selected=selected {% endif %} value="time_create">Time Created</option>
          <option {% if sort_by['b']['sort_field'] == 'location' %} selected=selected {% endif %} value="location">Location</option>
      </select>
      <select name="query_orderB" value="desc">
        <option {% if sort_by['b']['order'] == 'desc' %} selected=selected {% endif %} value="desc">DESC</option>
        <option {% if sort_by['b']['order'] == 'asc' %} selected=selected {% endif %} value="asc">ASC</option>    
      </select>
      <br />
      <input type="submit" id="query_submit" class="btn" value="Search" \>
    </div>
    {% if user %}
      <p><br/><a href="/items/old_searches">View Old Searches</a></p>
    {% endif %}
  </div>
</form>

  <h3>Local Results</h3>
<div class="well remote_search_table_wrapper" data-results-left="0" data-page="0" data-loading="" data-api-url="localhost:8081" id="local_search_results">
<table class="table table-striped remote_search_table">
  <thead>
    <th width="10%">Posted</th><th>Title</th><th>Description</th><th>Price</th>
      {% if is_admin %}
      <th>Delete</th><th width="15%">Expiration Date</th>
      {% endif %}
      {% if user %}
        <th>Contact</th>
      {% endif %}
  </thead>
  <tbody>

  </tbody>
</table>
<span class="showing_indicator">Showing 0 of 0</span><br />
<a href="#" class="search_prev" onclick="return false;">&lt;Prev</a>
<a href="#" class="search_next" style="padding-left:20px;" onclick="return false;">Next&gt;</a>
</div>
<hr />
<h3>Trusted Partner Results</h3>
<div class="well">
{% for partner in partners %}
  <h4> {{ partner.name }} </h4>
  <div class="remote_search_table_wrapper" data-results-left="0" data-page="0" data-loading="" data-partner-id="{{ partner.key().id() }}">
  <table class="table table-striped remote_search_table">
    <thead>
      <th>Title</th><th>Description</th><th>Price</th>
    </thead>
    <tbody>

    </tbody>
  </table>
  <span class="showing_indicator">Showing 0 of 0</span><br />
  <a href="#" class="search_prev" onclick="return false;">&lt;Prev</a>
  <a href="#" class="search_next" style="padding-left:20px;" onclick="return false;">Next&gt;</a>
</div>
<hr />
{% endfor %}
</div>
<br/><br/>
<a href="/">
  <button class="btn btn-primary" value="back">Go Back</button> 
</a>
{% endblock %}